<script setup>
import { ref } from 'vue'
const goodsData = ref([])

// 导入token
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore()

// 对话框
const dialogVisible = ref(false)
// 表单模型
const formModel = ref({})

import { addGoodsService, scrollGoodsService } from '@/api/market.js'
// 添加商品
const addGoods = async () => {
    await addGoodsService(formModel.value)
    dialogVisible.value = false
    formModel.value.name = ''
    formModel.value.image = ''
    ElMessage.success("添加成功")
}

import { ElMessage } from 'element-plus';
// 图片上传成功的回调函数
const uploadSuccess = (result) => {

    // 存储图片地址  
    formModel.value.image = result.data
    ElMessage.success("上传成功")
}

let scrollNum = 1
let maxNum = 1
// 添加一个标志位，表示当前是否正在加载数据，防止重复加载
let isLoading = false
const load = async () => {
    // 如果正在加载数据，则直接返回，避免重复加载
    if (isLoading) {
        return;
    }

    isLoading = true; // 设置加载状态为true

    //console.log(scrollNum);

    // 从后端获取数据
    let result = await scrollGoodsService(scrollNum)

    // 如果当前数据不为空则更新最大页数
    if (result.data.records.length !== 0) {
        // 最大查询页数一起 + 1
        maxNum++
    }

    // 判断是否超过最大查询页数
    if (scrollNum > maxNum) {
        ElMessage.warning("到底啦！")
        //console.log("scrollNum" + scrollNum + "," + "maxNum" + maxNum);
        isLoading = false; 
        return;
    }

    // 页数 + 1
    scrollNum++

    // 将后端获取的数据添加到展示数据中
    goodsData.value.push(...result.data.records)

    // 重置加载状态
    isLoading = false; 
}
</script>
<template>
    <!--     <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
        <el-card v-for="i in count" :key="i" class="infinite-list-item"></el-card>

    </ul> -->
    <el-row>
        <el-col :span="20">
            <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto; margin-top: 20px;">
                <div class="container">
                    <el-card v-for="(item, index) in goodsData" :key="index">
                        <template #header>
                            {{ item.name }}
                        </template>

                        <img :src="item.image" style="width: 100%;border-radius: 5px;">

                        <template #footer>
                            <el-button style="margin-left: 75%;">购买</el-button>
                        </template>
                    </el-card>
                </div>
            </ul>
        </el-col>
        <el-col :span="4">
            <el-button @click="dialogVisible = true" style="margin-left: 20%;" type="primary">发布商品</el-button>
            <br>
            <br>
            <el-button style="margin-left: 20%;" type="primary"><el-icon class="is-loading" style="margin-right: 5px;">
                    <Loading />
                </el-icon>求购开发中</el-button><br><br>
            <el-button style="margin-left: 20%;" type="primary" @click="$router.push('/voucher')">优惠券抢购</el-button>
        </el-col>
    </el-row>


    <!-- 表单弹框 -->
    <el-dialog v-model="dialogVisible" title="商品信息" width="500" align-center :close-on-click-modal="false">
        <!-- 新增商品表单 -->
        <el-form :model="formModel" label-width="100px">
            <el-form-item label="商品名称：" style="width: 300px;">
                <el-input v-model="formModel.name" placeholder="请输入" clearable />
            </el-form-item>

            <el-form-item label="商品图片：">
                <el-upload class="image-uploader" :auto-upload="true" :show-file-list="false"
                    action='/api/common/upload' name='file' :headers="{ 'authentication': tokenStore.token }"
                    :on-success="uploadSuccess">
                    <img v-if="formModel.image" :src="formModel.image" class="image" title="点击更换图片" />
                    <el-icon v-else class="image-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false; formModel.image = ''">取消</el-button>
                <el-button type="primary" @click="addGoods()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>


</template>

<style lang="scss" scoped>
.infinite-list {
    height: 600px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* .infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
} */

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*     grid-template-rows: masonry; */
    grid-gap: 10px;
    margin-left: 10%;
    /* margin-right: 10%; */

}

/* 添加图片样式 */
.image-uploader {
    :deep() {
        .image {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.image-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}
</style>
